<template>
	<view class="flex flex-y flex-x-y" v-if="show" @touchmove.stop.prevent="clear" :class="fixed?'loading-fixed':''">
		<image src="../../static/zhoudao/loading.gif" mode="widthFix"
			style="height: auto;width: 200rpx;margin: 100rpx 0 0 0;" :style="showStyle">
		</image>
		<view class="color-999999 fs-26" style="color: #71DCA4;">{{text || '加载中...'}}</view>
	</view>
</template>

<script>
	export default {
		name: "qq-loading",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			showStyle: {
				type: String,
				default: ''
			},
			text: {
				type: String,
				default: ''
			},
			fixed: {
				type: String,
				default: ''
			}
		},
		watch: {
			show(val) {

				if (this.show == true) {
					clearTimeout(this.timer1);

					this.timer1 = setTimeout(() => {
						this.$emit('changeValue', {
							key: 'qq_loading',
							value: false,
						});
					}, 7000);
				} else {
					clearTimeout(this.timer1);
				}
			},

		},
		data() {
			return {

			};
		},
	}
</script>

<style>
	.loading-fixed {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 99;
	}
</style>
